<template>
  <BorderBox11 :title="title" style="">
    <div class="main">
      <button @click="language" class="gjh">切换</button>
      <div>
		<slot/>
	  </div>
	  <div><slot name="center"></slot></div>
	  <div>1</div>
    </div>
  </BorderBox11>
</template>
<script setup>
import { BorderBox11 } from "@kjgl77/datav-vue3";
const { locale, t } = useI18n();
const title = ref("");

// 读取 pinia 中index模块
let index = useStore.index();
locale.value = index.i18nValue;
let { i18nValue } = index;
// onMounted(() => {
// 	// title.value = t("layout.title")
// 	console.log(title.value)
// 	console.log(t("layout.title"))
title.value = t("layout.title");
// })
watch(
  title,
  (n, o) => {
    console.log(n, o, 24);
  },
  { deep: true }
);

let tianQiArr = {};
// interface tianQiArrType{
// 	name:String,
// 	title:String
// }
// try {
// 	tianQiArr  =await useFetch("/api/hello")
// } catch (error) {

// }

const language = () => {
  if (index.i18nValue == "zh") {
    index.i18nValue = "en";
  } else {
    index.i18nValue = "zh";
  }
  locale.value = index.i18nValue;
  console.log(t("index"), 21);
  title.value = t("layout.title");
};
watch(
  index.i18nValue,
  (state) => {
    // 每当状态发生变化时，将整个 state 持久化到本地存储。
    // localStorage.setItem('piniaState', JSON.stringify(state))
    console.log(state, 48);
    language();
  },
  { deep: true, immediate: true }
);
</script>
<style scoped>
.main {
  width: 720px;
  height: 80vh;
  padding: 20px 10px 10px 10px;
  overflow: hidden;
  display: flex;
  /* background-color: blue; */
}
.main div{
	flex: 1;
	/* border: 1px solid #000; */
	overflow-y: scroll;
	overflow-x: hidden;

}
.gjh{
	position: absolute;
	top: 10px;
	left: 55%;
}

</style>
